<template>
  <div class="page keyIssuesHistoryList-page" data-page="keyIssuesHistoryList" style="z-index: 2;">
      <div class="link-page-nav">
          <a href="#" class="link"  @click="$root.backToTab()">
              <i class="iconfont icon-zuo"></i>
          </a>
      </div>
      <div class="link-page-top" style="padding-bottom: 17px;">
          <div class="link-page-title">历史记录</div>
      </div>
      <div class="history-list-select">
          <a class="link popover-open" id="active_{{getNewId}}" style="color: #000000;" data-popover="#keyIssuesHistoryList_menu">
              <i class="iconfont icon-APPicon_shaixuan1" style="font-size:24px;"></i>
          </a>
       </div>
    <div class="page-content infinite-scroll-content" 
        data-infinite-distance="55" 
        @infinite="loadMore">
         <div class="media-list" style="margin-top: 10px;">
            <ul class="keyIssuesHistoryList_list" id="keyIssuesHistoryList_list_{{getNewId}}"></ul>
           <div id="keyIssuesHistoryList_preloader_{{getNewId}}" class="preloader infinite-scroll-preloader"> </div>
        </div>
    </div>
    <div class="popover select-option-con" id="keyIssuesHistoryList_menu">
        <div class="popover-angle"></div>
        <div class="popover-inner">
          <div class="list">
            <ul>
              <li><a href="" class="list-button item-link popover-close" id="keyIssuesHistoryList_org_{{getNewId}}">选择单位</a></li>
              <li><a href="" class="list-button item-link popover-close" @click="getTbTime" id="keyIssuesHistoryList_date_{{getNewId}}">选择日期</a></li>
              <li><a href="" class="list-button item-link popover-close removeScreen select-active" @click="removeScreen" >清&nbsp&nbsp&nbsp&nbsp&nbsp空</a></li>
            </ul>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
	return {
		 mounted() {
            var self = this;
            if (single_Orgid == "") {
              self.organizationIds=userInfor.organizationIds;
            } else {
              self.organizationIds=single_Orgid;
            }
        },
        data: function () {
            return {
              pageIndex:0,
              pageSize:25,
              allowInfinite:true,
              isInfinite:true,
              organizationIds:"",
              startTimeStr:"",
              endTimeStr:"",
              selectOptionIndex:'',
              selectOptionOrg : "",
              getNewId: (new Date()).getTime()
            }
        },
        methods: {
        	// 获取列表数据
        	getKeyIssuesHistoryList:function() {
        		var self = this;
        		var $ = self.$$;
            //筛选按钮有值变色
            if(jQuery("#keyIssuesHistoryList_date_"+self.getNewId)[0].innerText != "选择日期" || jQuery("#keyIssuesHistoryList_org_"+self.getNewId)[0].innerText != "选择单位"){
                   jQuery("#active_" + self.getNewId).addClass("select-active");
             }else{
                   jQuery("#active_" + self.getNewId).removeClass("select-active");
             }
             Dao.getImportantQuestionList({
                  userName: userInfor.accountName,
                  organizationIds:self.organizationIds,
                  isReset:1,
                  status:"",
                  startTimeStr:self.startTimeStr,
                  endTimeStr:self.endTimeStr,
                  queryType:1,
                  timeType:13,
                  pageIndex:self.pageIndex,
                  pageSize:self.pageSize
              },function(data,total){
                  if(data && data.length>0){
                    //没分页
                    if (self.pageSize * self.pageIndex + data.length < total) { //有分页
                      $("#keyIssuesHistoryList_preloader_"+self.getNewId).show();
                      self.allowInfinite = true;
                    } else {  //没分页
                      $("#keyIssuesHistoryList_preloader_"+self.getNewId).hide();
                      self.allowInfinite = false;
                    }

                    for (var i = 0; i < data.length; i++) {
                    	keyIssuesListData_rdsp[data[i].id] = data[i];
                        var dealHtml="";
                        var alertHtml="";
                        //判断是否完成
                        if(data[i].status==0){
                            alertHtml="";
                        }else{
                            alertHtml=`<div><img class='highDanger-item-overtime-img' style="left:8%" src='/ilink-app-h5-zd/static/img/rdspFile_1554726645262.png'/></div>`;
                        }
                       if(data[i].questionType==1 || data[i].questionType==2) { //消控室无人值守
                       	 $("#keyIssuesHistoryList_list_"+self.getNewId).append(`
                           <li data-id="`+data[i].id+`">
                            <div class="item-fireHazardList-list">
                             `+alertHtml+`
                           <div class="item-fireHazardList-img">
                            <img class="view-pic" src="`+data[i].detailPic+`" width="100%" height="100%">
                           </div>
                            <div class="item-fireHazardList-info">
                              <div class="fireHazardList-detail" data-id="`+data[i].id+`">
                              <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                              <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                              <div class="fireHazardList-org">
                              <span class="fireHazardList-icon">
                                <i class="iconfont icon-dingweiweizhi"></i>
                              </span>
                              <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                             </div></div>
                             <div class="fireHazardList-line"></div>
                             <div class="fireHazardList-bottom">
                               <span class="bottom-left">已持续`+data[i].intervalTime+`</span>`+dealHtml+`
                             </div></div></div></li>`);
                       } else if(data[i].questionType==4) { // 展示消防系统完整性
                       	  $("#keyIssuesHistoryList_list_"+self.getNewId).append(`
                             <li data-id="`+data[i].id+`">
                               <div class="item-fireHazardList-list">
                               `+alertHtml+`
                                  <div class="item-fireHazardList-num">
                               <div>
                                  <p>`+common.transNullundefinedToline(data[i].statusCount)+`</p>
                                 <p>处故障</p>
                                </div>
                               </div>
                              <div class="item-fireHazardList-info">
                               <div class="fireHazardList-detail" data-id="`+data[i].id+`">
                               <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                                <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                               <div class="fireHazardList-org">
                                <span class="fireHazardList-icon">
                                  <i class="iconfont icon-dingweiweizhi"></i>
                                 </span>
                                <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                               </div></div>
                               <div class="fireHazardList-line"></div>
                                 <div class="fireHazardList-bottom">
                                 <span class="bottom-left">已持续`+data[i].intervalTime+`</span>
                                `+dealHtml+`
                               </div></div></div></li>`);
                       } else if(data[i].questionType==5) { // 展示消防系统完整性
                       	   $("#keyIssuesHistoryList_list_"+self.getNewId).append(`
                           <li data-id="`+data[i].id+`">
                            <div class="item-fireHazardList-list">`+alertHtml+`
                            <div class="item-fireHazardList-img">
                              <img class="view-pic" src="`+data[i].detailPic+`" width="100%" height="100%">
                            </div>
                             <div class="item-fireHazardList-info">
                              <div class="fireHazardList-detail" data-id="`+data[i].id+`">
                              <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                             <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                            <div class="fireHazardList-org">
                             <span class="fireHazardList-icon">
                                <i class="iconfont icon-dingweiweizhi"></i>
                             </span>
                             <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                             </div></div>
                             <div class="fireHazardList-line"></div>
                             <div class="fireHazardList-bottom">
                              <span class="bottom-left">已持续`+data[i].intervalTime+`</span>`+dealHtml+`
                             </div>
                            </div>
                           </div>
                          </li>`);
                       } else {
                       	 $("#keyIssuesHistoryList_list_"+self.getNewId).append(`
                           <li data-id="`+data[i].id+`">
                            <div class="item-fireHazardList-list">`+alertHtml+`
                            <div class="item-fireHazardList-img">
                               <img class="view-pic" src="`+data[i].detailPic+`" width="100%" height="100%">
                             </div>
                               <div class="item-fireHazardList-info">
                              <div class="fireHazardList-detail" data-id="`+data[i].id+`">
                               <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                               <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                             <div class="fireHazardList-org">
                              <span class="fireHazardList-icon">
                             <i class="iconfont icon-dingweiweizhi"></i>
                               </span>
                              <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                              </div></div>
                             <div class="fireHazardList-line"></div>
                              <div class="fireHazardList-bottom">
                               <span class="bottom-left">已持续`+data[i].intervalTime+`</span>`+dealHtml+`
                             </div>
                            </div>
                          </div>
                          </li>
                        `);
                       }
                       //展示图片
                       jQuery("#keyIssuesHistoryList_list_" + self.getNewId + " .view-pic").off().click(function() {
                        var picUrl = $(this).attr("src").split(",");
                        openAndShowBigImage([picUrl],0);
                       });

                       jQuery("#keyIssuesHistoryList_list_" + self.getNewId + " .fireHazardList-detail").off().click(function(){
                        var id = jQuery(event.currentTarget).attr("data-id");
                        app.router.navigate("/keyIssuesDetail/"+id+"/0/");
                       });

                    }
                  } else {
                    if (self.pageIndex == 0) { //暂无数据
                       self.isInfinite = false;
                      $("#keyIssuesHistoryList_preloader_"+self.getNewId).hide();
                      $("#keyIssuesHistoryList_list_"+self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                    }
                 }
             });
        	},
        	loadMore:function() {
        		var self = this;
        		if (!self.allowInfinite) return;
        		self.allowInfinite = false;
        		setTimeout(function () {
        			self.pageIndex++;
        			self.getKeyIssuesHistoryList();
        			self.allowInfinite = true;
              }, 1000);
        	},
        	reInit:function(){
        		var self = this;
        		self.pageIndex = 0;
            $("#keyIssuesHistoryList_list_"+self.getNewId).empty();
            if(!self.allowInfinite){
                	self.allowInfinite = true;
                	$('#keyIssuesHistoryList_preloader_'+self.getNewId).show();
              }
           },
            refreshMaintainList: function (e, done) {
            	if (done && e) {
            		var self = this;
            		var $ = self.$$;
            		setTimeout(function () {
            			self.reInit();
            			$('#keyIssuesHistoryList_preloader_'+self.getNewId).hide();
            			self.getKeyIssuesHistoryList();
            			done();
            		}, 1000);
            	}
            },
            removeScreen:function(){
              var self = this;
              if (userInfor.isMuilUnitUser == 1){//多
                    self.selectOptionOrg = "";
                    if (single_Orgid == "") {
                      self.organizationIds=userInfor.organizationIds;
                    } else {
                      self.organizationIds=single_Orgid;
                    }
                    jQuery("#keyIssuesHistoryList_org_"+self.getNewId).html("选择单位");
                    jQuery("#keyIssuesHistoryList_org_"+self.getNewId).removeClass('select-active');

                }
                self.selectOptionIndex = "";
                self.startTimeStr = "";
                self.endTimeStr = "";
                jQuery("#keyIssuesHistoryList_date_"+self.getNewId).html("选择日期");
                jQuery("#keyIssuesHistoryList_date_"+self.getNewId).removeClass('select-active');
                jQuery("#keyIssuesHistoryList_list_"+self.getNewId).empty();
                self.clearContent();
                $("#keyIssuesHistoryList_preloader_"+self.getNewId).show();
                self.getKeyIssuesHistoryList();
            },
            clearContent:function() {
                if (this.startTimeStr!=''|| this.organizationIds!=userInfor.organizationIds){
                    $("#key-search").addClass('search-select');
                } else {
                    $("#key-search").removeClass('search-select');
                }
            },
            //时间筛选
            getTbTime:function(){
                var self = this;
                loadSelectedDate_Fn(3,function(data){
                    self.startTimeStr = data.startTime;
                    self.endTimeStr = data.endTime;
                    jQuery("#keyIssuesHistoryList_list_"+self.getNewId).empty();
                    self.clearContent();
                    $("#keyIssuesHistoryList_preloader_"+self.getNewId).show();
                    jQuery("#keyIssuesHistoryList_date_"+self.getNewId).html(self.startTimeStr.substring(5,10))
                    jQuery("#keyIssuesHistoryList_date_"+self.getNewId).addClass("select-active")
                    self.getKeyIssuesHistoryList();
                });
            },
        },
        on: {
          pageAfterIn:function (e, page) {
          	var self = this;
            var $ = self.$$;

            self.pageIndex = 0;
            keyIssuesListData_rdsp=[];
            self.reInit();
            self.getKeyIssuesHistoryList();

            //选择单位
            jQuery("#keyIssuesHistoryList_org_"+self.getNewId).click(function(e) {
                loadSelectUnitFunc(function(data){
                    //选中
                    if(self.selectOptionOrg != data.orgId){
                        self.selectOptionOrg = data.orgId;
                        self.organizationIds = data.orgId;
                        jQuery("#keyIssuesHistoryList_org_"+self.getNewId).html(data.orgName);
                        jQuery("#keyIssuesHistoryList_org_"+self.getNewId).addClass('select-active');
                    } else {
                        self.selectOptionOrg = "";
                        if (single_Orgid == "") {
                          self.organizationIds=userInfor.organizationIds;
                        } else {
                          self.organizationIds=single_Orgid;
                        }
                        jQuery("#keyIssuesHistoryList_org_"+self.getNewId).html("选择单位");
                        jQuery("#keyIssuesHistoryList_org_"+self.getNewId).removeClass('select-active');
                    }
                    jQuery("#keyIssuesHistoryList_list_"+self.getNewId).empty();
                    self.clearContent();
                    $("#keyIssuesHistoryList_preloader_"+self.getNewId).show();
                    self.getKeyIssuesHistoryList();
                },self.selectOptionOrg);
            });
          }
       }
	}
</script>
<style scoped>
	.history-list-select{
		color: #000000;
		position: absolute;
		right: 20px;
		top: 38px;
	}
  .keyIssuesHistoryList_list li {
    background: #ffffff;
    border: 1px solid rgba(225, 225, 225, 0.9);
    box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
    border-radius: 6px;
    margin: 0 20px;
    margin-bottom: 20px;
  }
</style>